<template>
    <div class="box">
        <top><h1 slot="tip">设置</h1></top>
        <ul class="u1">
            <li v-for="val in dataList1" :key="val.id" @click="handleClick1(val.id)">
                <p>{{val.name}}</p>
                <van-icon name="arrow" />
            </li>
        </ul>

        <ul class="u2">
            <li v-for="val in dataList2" :key="val.id" @click="handleClick2(val.id)">
                <p>{{val.name}}</p>
                <van-icon name="arrow" />
            </li>
        </ul>

        <ul class="u3">
            <li v-for="val in dataList3" :key="val.id" @click="handleClick3(val.id)">
                <p>{{val.name}}</p>
                <van-icon name="arrow" />
            </li>
        </ul>

        <div class="tuichu" @click="exit">
           <h2>退出登陆</h2>
        </div>
    </div>
</template>

<script>
import top from './setTop.vue'
export default {
  components: {
    top
  },
  data () {
    return {
      dataList1: [{
        id: 1,
        name: '账号中心'
      },
      {
        id: 2,
        name: '收获地址'
      },
      {
        id: 3,
        name: '新消息通知'
      }
      ],

      dataList2: [{
        id: 1,
        name: '扩展业务'
      },
      {
        id: 2,
        name: '推荐服务'
      },
      {
        id: 3,
        name: '清除本地缓存'
      }
      ],

      dataList3: [{
        id: 1,
        name: '意见反馈'
      },
      {
        id: 2,
        name: '意见反馈'
      }
      ]
    }
  },
  methods: {
    exit () {
      localStorage.removeItem('token')
      localStorage.removeItem('userData')
      const time = setTimeout(() => {
        this.$router.push('/center')
      }, 1000)
    }
  }

}
</script>

<style scoped>
.box{
    height: 100%;
    background-color: #f7f7f7;
}
.box ul{
    width: 100%;
    margin-top: 5px;
    float: left;
}
.box li{
    width: 100%;
    line-height: 45px;
    float: left;
    background-color: white;
}
.box li p{
    float: left;
    margin-left: 10px;
    font-size: 1rem;
    color: black;
    font-weight: bold;
}
.box li i{
    line-height: 50px;
    float: right;
}
.tuichu{
    width: 100%;
    line-height: 50px;
    float: left;
    text-align: center;
    background-color: white;
    margin-top: 10px;
}
.tuichu h2{
    font-size: 1rem;
    color: black;
    font-weight: bold;
}
</style>
